<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="编号" prop="name">
      <el-input v-model="ruleForm.name" />
    </el-form-item>
    <el-form-item label="户主姓名" prop="name">
      <el-input v-model="ruleForm.namea" />
    </el-form-item>
    <el-form-item label="门牌号" prop="name">
      <el-input v-model="ruleForm.nameb" />
    </el-form-item>
    <el-form-item label="房屋用途" prop="region">
      <el-select v-model="ruleForm.region" placeholder="请选择">
        <el-option label="常住" value="shanghai" />
        <el-option label="出租" value="beijing" />
      </el-select>
    </el-form-item>

    <el-form-item label="户型" prop="type">
      <el-checkbox-group v-model="ruleForm.type">
        <el-checkbox label="三室一厅" name="type" />
        <el-checkbox label="三室两厅" name="type" />
        <el-checkbox label="两室两厅" name="type" />
      </el-checkbox-group>
    </el-form-item>

    <el-form-item label="居住地址" prop="desc">
      <el-input v-model="ruleForm.desc" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        Create
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";

const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  name: "",
  namea: "",
  nameb: "",
  region: "",
  count: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  desc: "",
});

const rules = reactive<FormRules>({
  name: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
  region: [
    {
      required: true,
      message: "Please select Activity zone",
      trigger: "change",
    },
  ],
  count: [
    {
      required: true,
      message: "Please select Activity count",
      trigger: "change",
    },
  ],

  type: [
    {
      type: "array",
      required: true,
      message: "Please select at least one activity type",
      trigger: "change",
    },
  ],

  desc: [
    { required: true, message: "Please input activity form", trigger: "blur" },
  ],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}));
</script>

<style second lang="scss">
:deep(*[data-v-1c0480c2]) {
  margin: 20px;
}
:deep(.el-input__wrapper) {
  width: 100px;
}
</style>
